<script setup>
defineProps({
  title: String,
  score: [String, Number]
})
</script>

<template>
  <div class="so-bg">
    <div class="so-score">{{ score }}</div>
    <div class="so-name" v-html="title"></div>
    <div class="so-item so-item1">
      <img class="soi-img" src="../assets/offset-avg.png">
      <span class="soi-title">与最大值偏差</span>
      <span class="soi-value">3%</span>
    </div>
    <div class="soi-line1"></div>
    <div class="so-item so-item2">
      <img class="soi-img" src="../assets/offset-avg.png">
      <span class="soi-title">与最小值偏差</span>
      <span class="soi-value">3%</span>
    </div>
    <div class="soi-line2"></div>
    <div class="so-item so-item3">
      <img class="soi-img" src="../assets/offset-avg.png">
      <span class="soi-title">与平均值偏差</span>
      <span class="soi-value">3%</span>
    </div>
  </div>
</template>

<style scoped>
.so-bg {
  margin-bottom: 30px;
  background: url("../assets/bg-unit-one2.png") no-repeat;
  background-size: 100% 100%;
  width: 472px;
  height: 108px;
  position: relative;
}
.so-score {
  width: 95px;
  height: 34px;
  font-size: 28px;
  font-family: DIN-Bold, DIN sans-serif;
  font-weight: bold;
  color: #fff;
  position: absolute;
  left: 0;
  top: 21px;
  text-align: center;
}
.so-name {
  width: 95px;
  font-size: 12px;
  line-height: 17px;
  font-family: PingFang SC-Regular, PingFang SC sans-serif;
  font-weight: 400;
  color: #fff;
  -webkit-background-clip: text;
  position: absolute;
  left: 0;
  top: 56px;
  text-align: center;
}
.so-item {
  display: flex;
  align-items: center;
}
.so-item1 {
  position: absolute;
  top: 15px;
  left: 149px;
}
.soi-img {
  width: 24px;
  height: 24px;
}
.soi-title {
  font-size: 14px;
  font-family: PingFang SC-Regular sans-serif;
  margin: 0 3px;
}
.soi-value {
  font-size: 16px;
  font-family: PingFang SC-Bold, PingFang SC sans-serif;
  font-weight: bold;
  color: #32C9D3;
}
.soi-line1 {
  position: absolute;
  width: 69px;
  height: 14px;
  opacity: 1;
  border: 1px dashed #32C9D3;
  border-top: none;
  border-right: none;
  top: 40px;
  left: 162px;
}
.so-item2 {
  position: absolute;
  top: 41px;
  left: 237px;
}
.soi-line2 {
  position: absolute;
  width: 44px;
  height: 14px;
  opacity: 1;
  border: 1px dashed #32C9D3;
  border-top: none;
  border-right: none;
  top: 68px;
  left: 250px;
}
.so-item3 {
  position: absolute;
  top: 68px;
  left: 298px;
}
</style>